
<!--
 <notice :message="message"></notice>
 message: "vue 滚动公告栏 <span>自定义文字</span> 滚动公告栏  <span>自定义文字</span>滚动公告栏 <span>自定义文字</span> 滚动公告栏 <span>自定义文字</span>"
-->
<template>
    <div class="advert-top btnCSS" v-if="openRoll">
        <div class="ico-horn">
            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        </div>
        <!-- 滚动文字区域 -->
        <div class="marquee-wrap">
            <ul class="marquee-box" id="marquee-box">
                <li class="marquee-list" v-for="i in 3" v-html="message" :id="i==1?'marquee':''"></li>
            </ul>
        </div>
        <div class="ico-horn" @click.stop="changeOpen">
            <i class="fa fa-times-circle" aria-hidden="true"></i>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: "rolling",
        props: {
            message: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                openRoll: true
            };
        },
        mounted: function() {
            // 延时滚动
            setTimeout(() => {
                this.runMarquee();
            }, 1000);
        },
        methods: {
            runMarquee() {
                // 获取文字 计算后宽度
                var width = document.getElementById("marquee").getBoundingClientRect()
                        .width,
                    marquee = document.getElementById("marquee-box"),
                    disx = 0; // 位移距离
                //设置位移
                setInterval(() => {
                    disx--; // disx-=1; 滚动步长
                    if (-disx >= width) {
                        disx = 10; // 如果位移超过文字宽度，则回到起点  marquee-list的margin值
                    }
                    // marquee.style.transform = 'translateX(' + disx + 'px)'
                    marquee.style.left = disx + "px";
                }, 30); //滚动速度
            },
            changeOpen() {
                this.openRoll = !this.openRoll;
            }
        }
    };
    // JavaScript Document
  /*  (function px2rem(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
            };
        if (!doc.addEventListener) return;
        // 窗口大小发生变化，初始化
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
        setTimeout(function() {
            px2rem(doc, win);
        }, 200);
    })(document, window);*/
</script>
<style>
    body,
    div,
    html,
    img,
    li,
    ul {
        margin: 0;
        padding: 0;
        border: 0;
    }
    li {
        list-style: none;
    }
    .advert-top {
        position: relative;
        display: flex;
        width: 100%;
        height: 40px;
        background-color: rgba(237, 64, 20,0.8);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        align-items: center;
        padding: 8px;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .ico-horn {
        /* display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;*/
        text-align: center;
        line-height: 100%;
        padding-left: 10px;
    }
    .ico-horn > img {
        width: 30px;
        height: 30px;
    }
    /* 以下代码与滚动相关 */
    .marquee-wrap {
        position: relative;
        display: flex;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin-left: 10px;
    }
    .marquee-box {
        position: absolute;
        top: 50%;
        display: flex;
        white-space: nowrap;
        transform: translateY(-50%);
    }
    .marquee-list {
        margin-right: 10px;
    }
    .marquee-list span {
        padding: 0 0.04rem;
        font-weight: 700;
    }

    @keyframes rotates {
        0% {
            background-color: rgba(255, 153, 0,0.8);
        }
        100%{
            background-color: rgba(237, 64, 20,0.8);
        }
    }
    .btnCSS {
        animation-name: rotates;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }


</style>













<!--
&lt;!&ndash;
<my-marquee :lists="lists"></my-marquee>
&ndash;&gt;
<template>
    <div class="wrap">
        <div ref="box" class="box">
            <div ref="marquee" class="marquee">{{text}}</div>
            <div ref="copy" class="copy"></div>
        </div>
        <div ref="node" class="node">{{text}}</div>
    </div>
</template>
<script>
    export default {
        name : 'Marquee',
        props: ['lists'], // 父组件传入数据， 数组形式 [ "连雨不知春去","一晴方觉夏深"]
        data () {
            return {
                text: '' // 数组文字转化后的字符串
            }
        },
        methods: {
            move () {
                // 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）
                let width = this.$refs.node.getBoundingClientRect().width
                this.$refs.copy.innerText = this.text // 文字副本填充
                let distance = 0 // 位移距离
                // 设置位移
                setInterval(() => {
                    distance = distance - 1
                    // 如果位移超过文字宽度，则回到起点
                    if (-distance >= width) {
                        distance = 16
                    }
                    this.$refs.box.style.transform = 'translateX(' + distance + 'px)'
                }, 20)
            }
        },
        // 把父组件传入的arr转化成字符串
        mounted: function () {
            for (let i = 0; i < this.lists.length; i++) {
                this.text += ' ' + this.lists[i]
            }
        },
        // 更新的时候运动
        updated: function () {
            this.move()
        }
    }
</script>
<style scoped>

    .wrap {
        overflow: hidden;
    }

    .box {
        width: 80000%;
    }

    .box div {
        float: left;
    }

    .marquee {
        margin: 0 16px 0 0;
    }

    .node {
        position: absolute;
        z-index: -999;
        top: -999999px;
    }
</style>
-->
